<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="" method="get">
        <p>
            <label for="nickname">昵称</label>
            <input type="text" id="nickname" name="nickname" maxlength="16" minlength="6" placeholder="请输入昵称">
            <span id="erNickName"></span>
            <!-- <button id="btn">ok</button> -->
        </p>
        <p>
            <label for="password">密码</label>
            <input type="text" name="password" id="password" max="16" placeholder="请输入密码">
            <span id="erPassword"></span>
        </p>
        <p>
            <label for="tel">手机号</label>
            <input type="number" name="tel" id="tel" placeholder="请输入手机号">
            <span id="erTel"></span>
        </p>
        <!-- 提交表单 -->
        <input type="submit" value="注册">
    </form>
</body>
<script>
    var form = document.getElementsByTagName('form')[0];
    var nickname = document.getElementById('nickname');
    var password = document.getElementById('password');
    var tel = document.getElementById('tel');
    var spa = document.getElementsByTagName('span');

    //昵称规则
    nickname.onblur = function (e) {
        //6-16位,不能纯数字,不能除下划线以外的符号
        var v = nickname.value.trim();
        if (v.length == 0) {
            spa[0].innerHTML = '昵称不能为空';
        } else if (v.length < 6) {
            spa[0].innerHTML = '昵称应为6-16位';
        } else {
            //精确匹配/^....$/
            //\w:数字,字母,下划线
            //{6,16}表示重复出现6-16次
            if (/^w{6,16}$/.test(v) && !/^\d{6,16}$/.test(v)) {
                spa[0].innerHTML = '昵称正确';
            } else {
                spa[0].innerHTML = '昵称应为6-16位,非纯数字,不能除下划线以外的符号';
            }
        }
    }

    //手机号规则
    tel.onblur = function (e) {
        var v = tel.value.trim();
        var reg = /^1[3456789]\d{9}$/;
        if (reg.test(v)) {
            spa[2].innerHTML = '手机号正确';
        } else {
            spa[2].innerHTML = '手机号错误';
        }
    }
</script>

</html>